<template>
	<view class="conten" :style="{ backgroundImage: `url(${bgImage})` }">
		<view class="conten_main"  >
			<view v-for="(item, index) in indexList" :key="index" style="position:relative;">
				<view style="margin: 10px 10px 30px 10px;background-color:white;border: 2px solid #ecf5ff;border-radius: 12px;padding: 7px;">
					<view style="text-align: center;">
						<text style="font-size: 24px;color:#000000;margin-right: 10px;">{{item.code}}</text>
						<image src="/static/copy.png" style="width: 16px;height: 16px;" @click="copy(item.code)"></image>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 16px;color:#AAAAAA;font-size: 14px;">{{item.lstime}}</text>
					</view>
					<view style="background-color: #F2F3F5;border-radius: 50px; height: 20px; margin-bottom: 10px;margin-top: 20px;padding: 20px;display: flex; justify-content: space-between; align-items: center;justify-content: space-between; align-items: center;">
						<text style="color: #000000;font-weight: bold;">揽收地址：</text>
						<text style="color: #000000;font-weight: bold;">{{item.lsaddress}}</text>
					</view>
					<view style="background-color: #F2F3F5;border-radius: 50px; height: 20px; margin-bottom: 10px;margin-top: 20px;padding: 20px;display: flex; justify-content: space-between; align-items: center;justify-content: space-between; align-items: center;">
						<text style="color: #000000;font-weight: bold;">送达地址：</text>
						<text style="color: #000000;font-weight: bold;">{{item.sdaddress}}</text>
					</view>
					<view style="display: flex; flex-wrap: wrap; gap: 10px;padding: 20px;">
					    <view v-for="(item1, index1) in item.files" :key="index1" class="file-item">
					        <image :src="item1.url" class="file-image"></image>
					        <text class="file-text">{{ item1.name }}</text>
					    </view>
					</view>
					<view style="text-align: center;">
						<text style="color: #AAAAAA;font-size: 14px;">{{item.qstime}}</text>
					</view>
					<view style="text-align: left;">
						<text style="color: #000000;font-weight: bold;">签收备注：</text>
					</view>
					<view style="text-align: left;padding: 20px;">
						<text style="color: #AAAAAA;font-size: 14px;">备注信息内容介绍，备注信息内容介绍，备注信息内 容介绍，备注信息内容介绍，备注信息内容介绍，</text>
					</view>
				</view>
				<image v-if="item.status===1" src="/static/sign.png" style="width: 100px;height: 100px;position:absolute; left: 70%;top: 57%;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				text:'',
				value:"",
				value15: '',
				bgImage:'/static/bg.png',
				indexList: [],
			}
		},
		onLoad(e) {
			this.loadmore();
		
		
		},
		onHide() {
		},
		mounted() {},
		methods: {
			back(){
				
			},
			  scrolltolower() {
			        this.loadmore();
			      },
			      loadmore() {
			        for (let i = 0; i < 3; i++) {
			          this.indexList.push({
			            code: "3255 0000 2121 323",
						lsaddress:"都江堰区xxxxx网点",
						sdaddress:"都江堰区xxxxx网点",
						lstime:'2024年 12-15 18:00揽收',
						qstime:'2024年 12-15 18:00签收',
						status:1,
						files:[{url:"/static/word.png",name:"文件1"},{url:"/static/word.png",name:"文件2"},{url:"/static/word.png",name:"文件3"}]
			          },
					  {
					    code: "3255 0000 2121 323",
					    lsaddress:"都江堰区xxxxx网点",
					    sdaddress:"都江堰区xxxxx网点",
						lstime:'2024年 12-15 18:00揽收',
						qstime:'',
					    status:0,
					    files:[{url:"/static/word.png",name:"文件1"},{url:"/static/word.png",name:"文件2"},{url:"/static/word.png",name:"文件3"}]
					  }
					  );
			        }
			      },
			copy(code){
				uni.setClipboardData({
				        data: code, 
				        success: () => {
				          this.isCopied = true;
				          setTimeout(() => {
				            this.isCopied = false;
				          }, 2000);  
				        },
				        fail: (err) => {
				          console.error('复制失败:', err);
				        }
				      });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.conten {
		width: 100%;
		height: 100vh;
		//position: relative;
		position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 0; 
		   background-repeat: no-repeat; 
		      background-size: cover; 
		      background-position: center; 
	}
	.conten_main {
		width: 100%;
		height: 100vh;
		// background-color: #F3F4F6;
	}
	.custom-style {
		color: #ff0000;
		width: 80rpx;
	}
	.file-item {
	    display: flex;
	    flex-direction: column; 
	    align-items: center; 
	    text-align: center;
	    width: 60px; 
		text-align: center;
	}
	
	.file-image {
	    width: 50px;
	    height: 50px;
	}
	
	.file-text {
	    margin-top: 5px; 
	    font-size: 14px;
	    color: #333;
	}
</style>